<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SmartUI Studio - OpenHarmony UI自动化测试平台</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/notification.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/project-selection.css') }}">
</head>
<body>
    <!-- 顶部标题栏 -->
    <header class="header">
        <div class="header-left">
            <button class="btn menu-btn" title="菜单">
                <i class="bi bi-grid-3x3-gap-fill"></i>
            </button>
            <button class="btn home-btn" title="首页">
                <img src="{{ url_for('static', filename='img/logo.svg') }}" alt="SmartUI Studio" class="logo">
                <span>SmartUI Studio</span>
            </button>
        </div>
        <div class="header-right">
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" id="permissionDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-shield-lock"></i>
                    <span>权限管理</span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="permissionDropdown">
                    <li><a class="dropdown-item" href="#">用户管理</a></li>
                    <li><a class="dropdown-item" href="#">角色管理</a></li>
                    <li><a class="dropdown-item" href="#">权限设置</a></li>
                </ul>
            </div>
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" id="helpDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-question-circle"></i>
                    <span>帮助</span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="helpDropdown">
                    <li><a class="dropdown-item" href="#">使用指南</a></li>
                    <li><a class="dropdown-item" href="#">API文档</a></li>
                    <li><a class="dropdown-item" href="#">关于</a></li>
                </ul>
            </div>
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" id="notificationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-bell"></i>
                    <span class="notification-badge">3</span>
                </button>
                <ul class="dropdown-menu notification-menu" aria-labelledby="notificationDropdown">
                    <li><a class="dropdown-item" href="#">测试完成: 项目1</a></li>
                    <li><a class="dropdown-item" href="#">设备连接成功: 设备2</a></li>
                    <li><a class="dropdown-item" href="#">新报告生成</a></li>
                </ul>
            </div>
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <img src="{{ url_for('static', filename='img/avatar.svg') }}" alt="用户头像" class="avatar">
                </button>
                <ul class="dropdown-menu" aria-labelledby="userDropdown">
                    <li><a class="dropdown-item" href="#">个人资料</a></li>
                    <li><a class="dropdown-item" href="#">设置</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="{{ url_for('logout') }}">退出登录</a></li>
                </ul>
            </div>
        </div>
    </header>

    <!-- 主体内容 -->
    <div class="main-container">
        <!-- 左侧导航栏 -->
        <nav class="sidebar collapsed" id="sidebar">
            <div class="sidebar-header">
                <button class="btn toggle-sidebar-btn" id="toggleSidebar" title="展开/折叠侧边栏">
                    <i class="bi bi-chevron-right"></i>
                </button>
            </div>
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link active" href="#">
                        <i class="bi bi-house-door"></i>
                        <span>Studio</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="bi bi-gear"></i>
                        <span>设置</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="bi bi-file-earmark-text"></i>
                        <span>文档</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="bi bi-bar-chart"></i>
                        <span>统计</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="bi bi-people"></i>
                        <span>用户</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- 右侧内容区 -->
        <main class="content">
            <!-- 标签栏 -->
            <ul class="nav nav-tabs" id="mainTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="workspace-tab" data-bs-toggle="tab" data-bs-target="#workspace" type="button" role="tab" aria-controls="workspace" aria-selected="true">Workspace</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="template-tab" data-bs-toggle="tab" data-bs-target="#template" type="button" role="tab" aria-controls="template" aria-selected="false">Template</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="task-tab" data-bs-toggle="tab" data-bs-target="#task" type="button" role="tab" aria-controls="task" aria-selected="false">Task</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="device-tab" data-bs-toggle="tab" data-bs-target="#device" type="button" role="tab" aria-controls="device" aria-selected="false">Device</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="report-tab" data-bs-toggle="tab" data-bs-target="#report" type="button" role="tab" aria-controls="report" aria-selected="false">Report</button>
                </li>
                <li class="nav-item ms-auto" role="presentation">
                    <button class="btn btn-outline-secondary" id="fullscreen-btn" title="全屏切换">
                        <i class="bi bi-fullscreen"></i>
                    </button>
                </li>
            </ul>

            <!-- 标签内容 -->
            <div class="tab-content" id="mainTabsContent">
                <!-- Workspace 标签内容 -->
                <div class="tab-pane fade show active" id="workspace" role="tabpanel" aria-labelledby="workspace-tab">
                    <div class="toolbar">
                        <div class="search-container">
                            <input type="text" class="form-control search-input" id="projectSearchInput" placeholder="搜索项目...">
                            <i class="bi bi-search search-icon"></i>
                        </div>
                        <div class="filters">
                            <div class="filter-item">
                                <label for="ownerFilter" class="filter-label">所有者：</label>
                                <select class="form-select" id="ownerFilter">
                                    <option selected>All</option>
                                    <option>admin</option>
                                    <option>tester</option>
                                </select>
                            </div>
                            <div class="filter-item">
                                <label for="typeFilter" class="filter-label">类型：</label>
                                <select class="form-select" id="typeFilter">
                                    <option selected>All</option>
                                    <option>UiTest</option>
                                    <option>UnitTest</option>
                                    <option>PerfTest</option>
                                    <option>XTS</option>
                                </select>
                            </div>
                            <div class="filter-item">
                                <label for="platformFilter" class="filter-label">平台：</label>
                                <select class="form-select" id="platformFilter">
                                    <option selected>All</option>
                                    <option>hos</option>
                                    <option>ohos</option>
                                    <option>khos</option>
                                </select>
                            </div>
                            <div class="filter-item">
                                <label for="versionFilter" class="filter-label">版本：</label>
                                <input type="text" class="form-control" id="versionFilter" placeholder="输入版本">
                            </div>
                            <div class="filter-item">
                                <label for="startDateFilter" class="filter-label">开始日期：</label>
                                <input type="date" class="form-control" id="startDateFilter">
                            </div>
                            <div class="filter-item">
                                <label for="endDateFilter" class="filter-label">结束日期：</label>
                                <input type="date" class="form-control" id="endDateFilter">
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button class="btn btn-primary" id="new_project" title="新建项目">
                                <i class="bi bi-plus"></i>
                            </button>
                            <button class="btn btn-primary" id="import_projects" title="导入项目">
                                <i class="bi bi-download"></i>
                            </button>
                            <button class="btn btn-secondary" id="export_projects" title="导出项目" disabled>
                                <i class="bi bi-upload"></i>
                            </button>
                            <button class="btn btn-danger" id="delete_projects" title="删除项目" disabled>
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </div>
                    <div class="table-container">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Owner</th>
                                    <th>Type</th>
                                    <th>Platform</th>
                                    <th>Version</th>
                                    <th>Create</th>
                                    <th>Edit</th>
                                    <th>Publish</th>
                                    <th>Description</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="projectsTable">
                                <!-- 项目列表将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Template 标签内容 -->
                <div class="tab-pane fade" id="template" role="tabpanel" aria-labelledby="template-tab">
                    <div class="toolbar">
                        <div class="search-container">
                            <input type="text" class="form-control search-input" placeholder="搜索模板...">
                            <i class="bi bi-search search-icon"></i>
                        </div>
                    </div>
                    <div class="templates-grid" id="templatesGrid">
                        <!-- 模板列表将通过JavaScript动态加载 -->
                    </div>
                </div>
                
                <!-- Task 标签内容 -->
                <div class="tab-pane fade" id="task" role="tabpanel" aria-labelledby="task-tab">
                    <div class="toolbar">
                        <div class="search-container">
                            <input type="text" class="form-control search-input" id="taskSearchInput" placeholder="搜索任务...">
                            <i class="bi bi-search search-icon"></i>
                        </div>
                        <div class="filters">
                            <div class="filter-item">
                                <label for="taskUserFilter" class="filter-label">用户：</label>
                                <select class="form-select" id="taskUserFilter">
                                    <option selected>所有用户</option>
                                    <option>admin</option>
                                    <option>tester</option>
                                </select>
                            </div>
                            <div class="filter-item">
                                <label for="taskTypeFilter" class="filter-label">类型：</label>
                                <select class="form-select" id="taskTypeFilter">
                                    <option selected>所有类型</option>
                                    <option>TypeA</option>
                                    <option>TypeB</option>
                                </select>
                            </div>
                            <div class="filter-item">
                                <label for="taskStatusFilter" class="filter-label">状态：</label>
                                <select class="form-select" id="taskStatusFilter">
                                    <option selected>所有状态</option>
                                    <option>Pending</option>
                                    <option>Running</option>
                                    <option>Completed</option>
                                    <option>Failed</option>
                                </select>
                            </div>
                        </div>
                        <button class="btn btn-primary" id="newTaskBtn">
                            <i class="bi bi-plus"></i> 新建任务
                        </button>
                    </div>
                    <div class="table-container">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Owner</th>
                                    <th>Type</th>
                                    <th>Status</th>
                                    <th>Create</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="tasksTable">
                                <!-- 任务列表将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- Device 标签内容 -->
                <div class="tab-pane fade" id="device" role="tabpanel" aria-labelledby="device-tab">
                    <div class="toolbar">
                        <div class="search-container">
                            <input type="text" class="form-control search-input" placeholder="搜索设备...">
                            <i class="bi bi-search search-icon"></i>
                        </div>
                        <div class="panel-actions">
                            <button class="btn btn-outline-primary">
                                <i class="bi bi-download"></i> 安装应用
                            </button>
                            <button class="btn btn-outline-primary">
                                <i class="bi bi-device-hdd"></i> 烧录镜像
                            </button>
                        </div>
                    </div>
                    <div class="table-container">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>SN</th>
                                    <th>Type</th>
                                    <th>IP</th>
                                    <th>Proxy</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="devicesTable">
                                <!-- 设备列表将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Report 标签内容 -->
                <div class="tab-pane fade" id="report" role="tabpanel" aria-labelledby="report-tab">
                    <div class="toolbar">
                        <div class="search-container">
                            <input type="text" class="form-control search-input" placeholder="搜索报告...">
                            <i class="bi bi-search search-icon"></i>
                        </div>
                    </div>
                    <div class="table-container">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Owner</th>
                                    <th>Testcase</th>
                                    <th>Device</th>
                                    <th>Created</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="reportsTable">
                                <!-- 报告列表将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 脚本引用 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    <script src="{{ url_for('static', filename='js/project-operations.js') }}"></script>
    
    <style>
        /* 项目选择相关样式 */
        #projectsTable tr {
            cursor: pointer;
        }
        
        #projectsTable tr.selected-project {
            background-color: rgba(13, 110, 253, 0.1);
        }
        
        .action-buttons {
            display: flex;
            gap: 5px;
        }
    </style>

    <!-- 导入项目模态框 -->
    <div class="modal fade" id="importProjectsModal" tabindex="-1" aria-labelledby="importProjectsModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="importProjectsModalLabel">导入项目</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <p>请选择包含项目配置文件的目录。</p>
                        <p class="text-muted">系统将自动查找并导入目录中的项目配置文件。</p>
                    </div>
                    <div class="mb-3">
                        <input type="file" class="form-control" id="importProjectsInput" webkitdirectory multiple>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmImportBtn">导入</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 导出项目模态框 -->
    <div class="modal fade" id="exportProjectsModal" tabindex="-1" aria-labelledby="exportProjectsModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exportProjectsModalLabel">导出项目</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="exportPath" class="form-label">导出路径</label>
                        <input type="text" class="form-control" id="exportPath" placeholder="/path/to/export">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmExportBtn">导出</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 新建项目模态框 -->
    <div class="modal fade" id="newProjectModal" tabindex="-1" aria-labelledby="newProjectModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="newProjectModalLabel">新建项目</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="newProjectForm">
                        <div class="mb-3">
                            <label for="projectName" class="form-label">项目名称</label>
                            <input type="text" class="form-control" id="projectName" required>
                        </div>
                        <div class="mb-3">
                            <label for="projectType" class="form-label">项目类型</label>
                            <select class="form-select" id="projectType" required>
                                <option value="UiTest">UiTest</option>
                                <option value="UnitTest">UnitTest</option>
                                <option value="PerfTest">PerfTest</option>
                                <option value="XTS">XTS</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="projectPlatform" class="form-label">目标平台</label>
                            <select class="form-select" id="projectPlatform" required>
                                <option value="hos">hos</option>
                                <option value="ohos">ohos</option>
                                <option value="khos">khos</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="projectVersion" class="form-label">系统版本</label>
                            <input type="text" class="form-control" id="projectVersion" required>
                        </div>
                        <div class="mb-3">
                            <label for="projectDescription" class="form-label">项目描述</label>
                            <textarea class="form-control" id="projectDescription" rows="3" required></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="createProjectBtn">确认</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>